<template>
  <div class="my">
    <!-- 顶部信息区域 -->
    <div class="top">
      <div class="user" v-if="userInfo">
        <div>
          <h3>{{ userInfo.nickname }}</h3>
          <p>{{ userInfo.intro }}</p>
        </div>
        <img :src="userInfo.avatar" alt="" @click="$router.push('/info')" />
      </div>
      <div class="data" v-if="userInfo">
        <div class="item">
          <h3>{{ userInfo.submitNum }}</h3>
          <p>累计答题</p>
        </div>
        <div class="item">
          <h3>{{ userInfo.collectQuestions.length }}</h3>
          <p>收藏题目</p>
        </div>
        <div class="item">
          <h3>{{ userInfo.errorNum }}</h3>
          <p>我的错题</p>
        </div>
        <div class="item">
          <h3>
            {{
              Math.floor(
                ((userInfo.submitNum - userInfo.errorNum) /
                  userInfo.submitNum) *
                  100
              )
            }}%
          </h3>
          <p>正确率</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-cell
        is-link
        :value="userInfo.position"
        @click="$router.push(`/editInfo/position`)"
      >
        <template #title>
          <i class="iconfont icon-shenfenzheng" style="fontSize:18px"></i>
          <span class="job">我的岗位</span>
        </template>
      </van-cell>
      <!-- 面经数据 -->
      <div class="interviewData">
        <h6>面经数据</h6>
        <div class="data" v-if="userInfo">
          <div class="item">
            <span
              >昨日阅读 <i>+{{ userInfo.shareData.read.yesterday }}</i></span
            >
            <h4>{{ userInfo.shareData.read.total }}</h4>
            <p>阅读总数</p>
          </div>
          <div class="item">
            <span
              >昨日获赞 <i>+{{ userInfo.shareData.star.yesterday }}</i></span
            >
            <h4>{{ userInfo.shareData.star.total }}</h4>
            <p>获赞总数</p>
          </div>
          <div class="item">
            <span
              >昨日新增 <i>+{{ userInfo.shareData.comment.yesterday }}</i></span
            >
            <h4>{{ userInfo.shareData.comment.total }}</h4>
            <p>评论总数</p>
          </div>
        </div>
      </div>
      <van-cell-group class="more" :border="false" v-if="userInfo">
        <van-cell value="21" is-link>
          <template #title>
            <i class="iconfont icon-mianshiqingkuang"></i>
            <span>我的面经分享</span>
          </template>
        </van-cell>
        <van-cell
          :value="userInfo.systemMessages"
          is-link
          @click="$router.push('/message')"
        >
          <template #title>
            <i class="iconfont icon-xiaoxi"></i>
            <span>我的消息</span>
          </template>
        </van-cell>
        <van-cell :value="userInfo.collectQuestions.length" is-link>
          <template #title>
            <i class="iconfont icon-shoucangshuji"></i>
            <span>收藏的题库</span>
          </template>
        </van-cell>
        <van-cell value="32" is-link>
          <template #title>
            <i class="iconfont icon-CDshoucangqiye"></i>
            <span>收藏的企业</span>
          </template>
        </van-cell>
        <van-cell :value="userInfo.errorNum" is-link>
          <template #title>
            <i class="iconfont icon-cuoti"></i>
            <span>我的错题</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      baseURL: process.env.VUE_APP_URL
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    if (!getLocal('heimamm_mobile_token')) {
      this.$router.push('/login')
      this.$toast.fail('请先登录')
    }
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.my {
  position: relative;
  margin-bottom: 50px;
  font-size: 16px;
  .top {
    width: 100%;
    height: 220px;
    background: #c6002f;
    padding: 15px;
    color: #fff;
    p {
      font-size: 12px;
      margin-top: 5px;
      color: #e99cae;
    }
    .user {
      height: 50%;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-between;
      margin: 0 15px;
      img {
        width: 50px;
        height: 50px;
        border: 3px solid #c7697e;
        border-radius: 50%;
        margin-right: 25px;
      }
    }
    .data {
      display: flex;
      justify-content: space-around;
      text-align: center;
    }
  }
  .bottom {
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    margin: 0 15px;
    background-color: #fff;
    border-radius: 10px;
    height: 500px;
    padding: 5px;
    .job {
      margin-left: 10px;
    }
    .interviewData {
      h6 {
        margin-top: 20px;
        margin-left: 15px;
      }
      .data {
        display: flex;
        justify-content: space-around;
        text-align: center;
        .item {
          margin-top: 15px;
          span {
            font-size: 12px;
            color: #cacacd;
            i {
              color: #5bbcd9;
              font-style: normal;
            }
          }
          p {
            font-size: 14px;
            color: #74768c;
          }
          h4 {
            margin: 8px 0;
          }
        }
      }
    }
    .more {
      margin-top: 30px;
      margin-bottom: 50px;
      span {
        margin-left: 15px;
      }
      .van-cell {
        padding-top: 16px;
      }
      /deep/.van-cell::after {
        border-bottom: none;
      }
      i {
        font-size: 20px;
      }
    }
  }
}
</style>
